import React, { PureComponent,useRef } from "react";


class TestCpn extends PureComponent {
  render() {
    return (
      <div>
        <h2>TestCpn</h2>
      </div>
    );
  }
}


function Test2() { 
  return (
    <div>
      <h2>Test2</h2>
    </div>
  );
}


export default function RefHookDemo01() {
  const titleRef = useRef();
  const inputRef = useRef();
  const testRef = useRef();
  const test2Ref = useRef();

  function changeDOM() {
    titleRef.current.innerHTML = "Hello World";
    inputRef.current.focus();

    console.log(testRef);
    console.log(test2Ref);
  }

  return (
    <div>
      <h2 ref={titleRef}>RefHookDemo01</h2>
      <input ref={inputRef} type="text" />
      <TestCpn ref={testRef}></TestCpn>
      <Test2 ref={test2Ref}></Test2>

      <button onClick={(e) => changeDOM()}>修改DOM</button>
    </div>
  );
}
